/**
 * Music module
 */
import React from 'react';
import tool from '../../../../../utils/tool';

class Music extends React.Component {
    initElements() {
        this.elements = {
            audio: $(this.refs.audio),
        };
    }
    componentDidMount() {
        this.initElements();
    }
    componentDidUpdate() {
        // const widget = this.props.widget;
        // if (widget.pause) {
        //     this.elements.audio[0].play();
        // } else {
        //     this.elements.audio[0].pause();
        // }
    }
    render() {
        const { widget } = this.props;

        widget.pause = widget.pause == undefined ? !!widget.auto_play : widget.pause;

        const bright = widget.color ? tool.isBrightColor(widget.color || '000000') : false;
        const iconSrcm = tool.getSrcmByTypeAndBright(widget.type, bright);

        const iconStyle = {
            background: `url(${iconSrcm}) no-repeat center`,
            backgroundSize: '20px',
            height: widget.height,
            color: bright ? '#000' : '#fff',
        };
        const gradColor = tool.converionColor(widget.color);
        const grad = `linear-gradient(140deg, rgb(${gradColor.R},${gradColor.G},${gradColor.B}),#${widget.color})`;
        let innerNode = '';
        if (widget.icon_src) innerNode = <img src={widget.icon_src} />;
        if (widget.icon_class && !widget.icon_src || widget.url) {
            innerNode =
              (<div className={`${!widget.pause ? '' : ' looker_animation'} music-control`} style={iconStyle}>
                <audio src={widget.url} preload="metadata" ref="audio" loop={widget.repeat ? 'loop' : ''} autoPlay={widget.auto_play ? 'autoplay' : ''}>
                  <source src={widget.url} />
                </audio>
              </div>);
        }
        return (
          <div className="widget-inline" style={{ borderRadius: '45px', opacity: widget.opacity, background: widget.icon_src ? 'none' : grad }}>
            {innerNode}
          </div>
        );
    }
}
Music.defaultProps = {
    name: "music",
    type: 6,
    width: 45,
    height: 45,
    color: "f76b1c",
    type_display: $._("Music"),
    icon_class: "icon-music",
    single_page: 1,
    auto_play: 1,
    repeat: 1
}
export default Music;
